import React from "react";

import PageContent from '../../PageContent';

import { Link } from 'react-router-dom';

import { Row, Col } from 'react-flexbox-grid';

import { Menu, Layout } from 'antd';

import { ajax, openErrorNotification, openSuccessNotification, showResultMessage, isNotNull, isNull ,setStoreItem,getStoreItem} from '../../common';

import BraftEditor from 'braft-editor'

import 'braft-editor/dist/index.css'

import ProductVersionSelect from './ProductVersionSelect';

import UICardTabs from '../../uicomponents/UICardTabs';

import { UIDataTableView } from '../../uicomponents/UIDataComponentView';

import UIFormView from '../../uicomponents/UIFormView';

import UIView from '../../uicomponents/UIView';

import UIIcon from '../../uicomponents/UIIcon';

import ProductObjectFormPanel from './ProductObjectEditFormPanel';

import ProductObjectAttrDataTablePanel from './ProductObjectAttrListPanel';

import ProductObjectRelateDataTablePanel from './ProductObjectRelateListPanel';

import ProductSceneFormPanel from './ProductSceneEditFormPanel';

import ProductSceneRelateDataTablePanel from './ProductSceneRelateListPanel';

import GGEditor, {
	Mind, Flow, withPropsAPI, Minimap, ItemPanel, Item,
	ContextMenu,
	NodeMenu,
	EdgeMenu,
	GroupMenu,
	MultiMenu,
	CanvasMenu,
} from 'gg-editor';

import { Base64 } from 'js-base64';

const {
	Content, Sider,
} = Layout;

/** 
 * 产品术语管理
*/
export default class ProductGlossaryManageApp extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			currentTabKey: null,
		}
	}

	render() {

		const pageContentMap = {
			'/': {
				text: '产品术语',
				icon: 'book',
				getComponent: function (owner, props) {
					return (
						<ProductGlossaryTabPanel {...props} pageHistory={props.history} activedTab={owner.currentTabKey} onTabChanged={(key) => owner.currentTabKey = key} />
					);
				}
			},
			'/edit': {
				text: '编辑',
				icon: 'edit',
				getComponent: function (owner, props) {
					const productGlossary = props.location.state;

					if ('PRODUCT_OBJECT' === productGlossary.type) {
						return (
							<ProductObjectEditTabPanel {...props} />
						);
					}
					else if ('PRODUCT_SCENE' === productGlossary.type) {
						return (
							<ProductSceneEditTabPanel {...props} />
						);
					}
					else if ('PRODUCT_MIND_MAP' === productGlossary.type) {
						return (
							<ProductMindMapEditPanel {...props} />
						);
					}
					else if ('PRODUCT_FLOW' === productGlossary.type) {
						return (
							<ProductFlowEditPanel {...props} />
						);
					}

				}
			}
		}

		return (
			<PageContent {...this.props} pageInstance={this} contentMap={pageContentMap}>

			</PageContent>
		);
	}
}

/**
 * 产品术语标签页
 */
class ProductGlossaryTabPanel extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			selectedProuctVersion: null,
		}
	}

	componentDidMount() {
		const owner = this;
		if (getStoreItem('lastSelectProductVersionId')) {
			ajax('PRODUCT/REQ/ProductDefine/getProductVersionById', { id: getStoreItem('lastSelectProductVersionId') }).then((data) => {
				owner.onSelectProduct(data);
			});
		}
	}

	onTabChange = (activeKey) => {
		const { selectedProuctVersion } = this.state;
		if ('businessObjectTab' === activeKey && isNotNull(selectedProuctVersion)) {
			this.productObjectListRef.loadData(selectedProuctVersion.id);
		}
		else if ('businessSceneTab' === activeKey && isNotNull(selectedProuctVersion)) {
			this.productSceneListRef.loadData(selectedProuctVersion.id);
		}
		else if ('businessMindMapTab' === activeKey && isNotNull(selectedProuctVersion)) {
			this.productMindMapListRef.loadData(selectedProuctVersion.id);
		}
		else if ('businessFlowTab' === activeKey && isNotNull(selectedProuctVersion)) {
			this.productFlowListRef.loadData(selectedProuctVersion.id);
		}
		//this.setState({activeTabKey : activeKey});
		if (this.props.onTabChanged) {
			this.props.onTabChanged(activeKey);
		}
	}

	onSelectProduct = (prouctVersion) => {

		this.setState({ selectedProuctVersion: prouctVersion });
		setTimeout(() => {
			if (isNotNull(this.productObjectListRef)) {
				this.productObjectListRef.loadData(prouctVersion.id);
			}
			if (isNotNull(this.productSceneListRef)) {
				this.productSceneListRef.loadData(prouctVersion.id);
			}
			if (isNotNull(this.productMindMapListRef)) {
				this.productMindMapListRef.loadData(prouctVersion.id);
			}
			if (isNotNull(this.productFlowListRef)) {
				this.productFlowListRef.loadData(prouctVersion.id);
			}
		});

	}


	render() {
		const { selectedProuctVersion, activeTabKey } = this.state;

		const tabPanelContentMap = {

			'/ProductObjectListPanel': {
				getComponent: (owner, props) => {
					return <ProductObjectListPanel {...props} history={this.props.pageHistory} ref={(inst) => this.productObjectListRef = inst} key="ProductObjectListPanel" />;
				}
			},
			'/ProductSceneListPanel': {
				getComponent: (owner, props) => {
					return <ProductSceneListPanel {...props} history={this.props.pageHistory} ref={(inst) => this.productSceneListRef = inst} key="ProductSceneListPanel" />;
				}
			},
			'/ProductMindMapListPanel': {
				getComponent: (owner, props) => {
					return <ProductMindMapListPanel {...props} history={this.props.pageHistory} ref={(inst) => this.productMindMapListRef = inst} key="ProductMindMapListPanel" />;
				}
			},
			'/ProductFlowListPanel': {
				getComponent: (owner, props) => {
					return <ProductFlowListPanel {...props} history={this.props.pageHistory} ref={(inst) => this.productFlowListRef = inst} key="ProductFlowListPanel" />;
				}
			},

		};

		return (
			<UICardTabs
				bordered={false}
				activeTabKey={this.props.activedTab}
				tabConfigId="ProductUI:productGlossaryTabPanel"
				extra={<ProductVersionSelect onSelectProduct={this.onSelectProduct}></ProductVersionSelect>}
				title={isNotNull(selectedProuctVersion) ? <span><UIIcon icon="suitcase" />{selectedProuctVersion.productName + ' ' + selectedProuctVersion.productVersion}</span> : <span><UIIcon icon="question" />{'请选择产品'}</span>}
				onTabChange={this.onTabChange}
				tabContentMap={isNotNull(selectedProuctVersion) ? tabPanelContentMap : {}}
			/>
		);
	}
}

/**
 * 产品对象列表
 */
class ProductObjectListPanel extends React.Component {

	state = {
		selectObjectIds: [],
		productVersionId: null,
	}

	loadData = (productVersionId) => {
		this.productVersionId = productVersionId;
		setTimeout(() => {
			this.productObjectList.loadData({ productVersionId: productVersionId, type: 'PRODUCT_OBJECT' });
		});
	}

	actionHandler = (actionEvent) => {
		const { productVersionId, selectObjectIds } = this;
		const owner = this;
		return {
			refresh: () => {
				this.loadData(productVersionId);
			},
			addNew: () => {
				this.addNewProductObject.openModal();
			},
			doDelete: () => {
				const objectIds = {}
				if (actionEvent.params) {
					objectIds.ids = [actionEvent.params.id];
				}
				else {
					objectIds.ids = selectObjectIds;
				}
				ajax('PRODUCT/REQ/ProductDefine/deleteProductGlossary', objectIds).then((data) => {
					if (data.hasError) {
						openErrorNotification(data.message);
					}
					else {
						owner.loadData(productVersionId);
					}
				});
			},
			doSave: () => {
				this.addNewProductObject.getFormData((formData) => {
					formData.type = 'PRODUCT_OBJECT';
					formData.productVersionId = productVersionId;
					ajax('PRODUCT/REQ/ProductDefine/saveProductGlossary/', formData, (data) => {
						if (data.hasError) {
							openErrorNotification(data.message);
						}
						else {
							this.addNewProductObject.closeModal();
							this.loadData(productVersionId);
						}
					});
				});
			}
		};
	}

	showGlossaryContent = (productGlossary) => {

		const editorState = BraftEditor.createEditorState(productGlossary.content);

		return (<p style={{ margin: 0 }}><BraftEditor contentStyle={{ height: 100 }} defaultValue={editorState} readOnly={true} controls={[]} /></p>);
	}

	render() {
		return (
			<React.Fragment>
				<UIDataTableView bordered={false}
					{...this.props}
					actionGroupId="ProductUI:productObjectListeActionGroup"
					rowActionGroupId="ProductUI:productObjectRowActionGroup"
					tableConfigId="ProductUI:productObjectListTable"
					dataUrl="PRODUCT/REQ/ProductDefine/queryProductGlossary"
					selectMode="multi"
					autoLoad={false}
					ref={(inst) => this.productObjectList = inst}
					actionHandler={this.actionHandler}
					expandedRowRender={this.showGlossaryContent}
					onSelectChange={(selectRowKeys) => {
						this.selectObjectIds = selectRowKeys;
					}}
					setToolbarState={(topToolBar, selectObjectIds) => {

						if (selectObjectIds.length > 0) {
							topToolBar.enable('delete');
						} else {
							topToolBar.disable('delete');
						}
					}
					}
				/>

				<UIFormView
					title="新增产品对象"
					destroyOnClose={true}
					inPop={true}
					formConfigId="ProductUI:productObjectAddNewForm"
					actionGroupId="ProductUI:saveActionGroup"
					ref={(inst) => this.addNewProductObject = inst}
					actionHandler={this.actionHandler}
				/>
			</React.Fragment>
		);
	}
}

/**
 * 产品场景列表
 */
class ProductSceneListPanel extends React.Component {

	state = {
		selectSceneIds: [],
		productVersionId: null,
	}

	loadData = (productVersionId) => {
		this.productVersionId = productVersionId;
		this.productSceneList.loadData({ productVersionId: productVersionId, type: 'PRODUCT_SCENE' });
	}

	actionHandler = (actionEvent) => {
		const { productVersionId, selectSceneIds } = this;
		const owner = this;
		return {
			refresh: () => {
				this.loadData(productVersionId);
			},
			addNew: () => {
				this.addNewProductScene.openModal();
			},
			doDelete: () => {
				const objectIds = {}
				if (actionEvent.params) {
					objectIds.ids = [actionEvent.params.id];
				}
				else {
					objectIds.ids = selectSceneIds;
				}
				ajax('PRODUCT/REQ/ProductDefine/deleteProductGlossary', objectIds).then((data) => {
					if (data.hasError) {
						openErrorNotification(data.message);
					}
					else {
						owner.loadData(productVersionId);
					}
				});
			},
			doSave: () => {
				this.addNewProductScene.getFormData((formData) => {
					formData.type = 'PRODUCT_SCENE';
					formData.productVersionId = productVersionId;
					ajax('PRODUCT/REQ/ProductDefine/saveProductGlossary/', formData).then((data) => {
						if (data.hasError) {
							openErrorNotification(data.message);
						}
						else {
							owner.addNewProductScene.closeModal();
							owner.loadData(productVersionId);
						}
					});
				});
			}
		};
	}

	showGlossaryContent = (productGlossary) => {

		const editorState = BraftEditor.createEditorState(productGlossary.content);

		return (<p style={{ margin: 0 }}><BraftEditor contentStyle={{ height: 100 }} defaultValue={editorState} readOnly={true} controls={[]} /></p>);
	}

	render() {
		return (
			<React.Fragment>
				<UIDataTableView bordered={false} {...this.props}
					ref={(inst) => this.productSceneList = inst}
					actionGroupId="ProductUI:productSceneListActionGroup"
					rowActionGroupId="ProductUI:productSceneRowActionGroup"
					tableConfigId="ProductUI:productSceneListTable"
					dataUrl="PRODUCT/REQ/ProductDefine/queryProductGlossary"
					selectMode="multi"
					autoLoad={false}
					actionHandler={this.actionHandler}
					expandedRowRender={this.showGlossaryContent}
					onSelectChange={(selectRowKeys) => {
						this.setState({ selectSceneIds: selectRowKeys });
					}}
					setToolbarState={(topToolBar, selectSceneIds) => {
						const { productVersionId } = this.state;
						if (selectSceneIds.length > 0) {
							topToolBar.enable('delete');
						} else {
							topToolBar.disable('delete');
						}
					}
					}
				/>

				<UIFormView
					title="新增产品场景"
					formConfigId="ProductUI:productSceneAddNewForm"
					actionGroupId="ProductUI:saveActionGroup"
					destroyOnClose={true}
					inPop={true}
					ref={(inst) => this.addNewProductScene = inst}
					actionHandler={this.actionHandler}
				/>
			</React.Fragment>
		);
	}
}

/**
 * 编辑产品对象
 */
class ProductObjectEditTabPanel extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			productObject: props.location.state,
			selectProductAttrIds: [],
			selectRelatedProductObjectIds: [],
			productGlossaryAttrFormTitle: '',
			productObjectRelateFormTitle: '',
		}
	}

	onTabChange = (tabKey) => {

		const { productObject } = this.state;

		if (tabKey === 'productObjectTab') {
			this.productObjectForm.loadData(productObject.id);
		}
		else if (tabKey === 'productGlossaryAttrList') {
			this.productObjectAttrList.loadData(productObject.id);
		}
		else if (tabKey === 'productGlossaryRelateListTab') {
			this.productObjectRelateList.loadData(productObject.id);
		}
		else if (tabKey === 'productGlossaryConetnt') {
			this.productObjectContent.loadData(productObject.id);
		}
	}

	render() {
		const { productObject } = this.state;

		const tabPanelContentMap = {

			'/productObjectEditForm': {
				getComponent: (owner, props) => {
					return <ProductObjectEditFormPanel {...props}
						productObjectId={productObject.id}
						ref={inst => this.productObjectForm = inst}
						key="productObjectEditForm" />;
				}
			},
			'/productGlossaryAttrListTable': {
				getComponent: (owner, props) => {
					return <ProductObjectAttrListPanel {...props}
						productObjectId={productObject.id}
						bordered={false}
						ref={(inst) => this.productObjectAttrList = inst}
						key="productObjectAttrList" />
				}
			},
			'/productGlossaryRelateListTable': {

				getComponent: (owner, props) => {
					return <ProductObjectRelateListPanel {...props}
						productObjectId={productObject.id}
						bordered={false}
						ref={(inst) => this.productObjectRelateList = inst}
						formParams={{ productVersionId: productObject.sinceVersionId, productGlossaryType: 'PRODUCT_OBJECT' }}
						key="productObjectRelateList" />
				}
			},
			'/productGlossaryConetnt': {

				getComponent: (owner, props) => {
					return <ProductGlossaryContentPanel {...props}
						bordered={false}
						ref={(inst) => this.productObjectContent = inst}
						key="productObjectContent" />
				}
			},

		};

		return (
			<UICardTabs
				tabConfigId="ProductUI:productObjectEditTab"
				bordered={false} {...this.props} onTabChange={this.onTabChange}
				title={<span><UIIcon icon="cube" />{'对象[' + productObject.name + ']'}</span>}
				tabContentMap={tabPanelContentMap}
				extra={<Link to="/">返回</Link>}
			/>
		);
	}
}

/**
 * 编辑业务场景
 */
class ProductSceneEditTabPanel extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			productScene: props.location.state,
			selectRelatedProductObjectIds: [],
			productSceneRelateFormTitle: '',
		}
	}

	onTabChange = (tabKey) => {

		const { productScene } = this.state;
		var owner = this;

		if (tabKey === 'productSceneEditTab') {
			ajax('PRODUCT/REQ/ProductDefine/getProductGlossaryById', { id: productScene.id }).then((data) => {
				owner.productSceneForm.setFormData(data);
			});
		}
		else if (tabKey === 'productGlossaryRelateListTab') {
			this.productSceneRelateList.loadData(productScene.id);
		}
		else if (tabKey === 'productGlossaryConetnt') {
			this.productSceneContent.loadData(productScene.id);
		}
	}


	render() {
		const { productScene } = this.state;

		const tabPanelContentMap = {

			'/productSceneEditFormPanel': {
				getComponent: (owner, props) => {
					return <ProductSceneEditFormPanel {...props}
						productSceneId={productScene.id}
						ref={inst => this.productSceneForm = inst}
						key="productSceneEditForm" />;
				}
			},
			'/productSceneRelateListPanel': {

				getComponent: (owner, props) => {
					return <ProductSceneRelateListPanel {...props}
						productSceneId={productScene.id}
						bordered={false}
						ref={(inst) => this.productSceneRelateList = inst}
						formParams={{ productVersionId: productScene.sinceVersionId, productGlossaryType: 'PRODUCT_OBJECT' }}
						key="productSceneRelateList" />
				}
			},
			'/productGlossaryConetntPanel': {

				getComponent: (owner, props) => {
					return <ProductGlossaryContentPanel {...props}
						bordered={false}
						ref={(inst) => this.productSceneContent = inst}
						key="productSceneContent" />
				}
			},

		};

		return (
			<UICardTabs
				tabConfigId="ProductUI:productSceneEditTab"
				bordered={false} {...this.props} onTabChange={this.onTabChange}
				title={<span><UIIcon icon="film" />{'场景[' + productScene.name + ']'}</span>}
				tabContentMap={tabPanelContentMap}
				extra={<Link to="/">返回</Link>}
			/>
		);
	}
}

/**
 * 产品对象编辑表单
 */
class ProductSceneEditFormPanel extends React.Component {

	loadData = (productSceneId) => {

		if (isNotNull(productSceneId)) {
			ajax('PRODUCT/REQ/ProductDefine/getProductGlossaryById', { id: productSceneId }, (data) => {
				this.productScene = data;
				this.productVersionId = data.sinceVersionId;
				this.productSceneFormRef.setFormData(data);
			});
		}
	}

	onMount = (form) => {
		this.loadData(this.props.productSceneId);
	}

	actionHandler = (actionEvent, panelInstance) => {
		return {

			doSave: () => {
				panelInstance.doSave({ productVersionId: this.productVersionId }, (result) => {
					showResultMessage(result);
				});
			},

		};
	}

	render() {

		return (
			<ProductSceneFormPanel ref={inst => this.productSceneFormRef = inst} onMount={this.onMount} actionHandler={this.actionHandler} />
		);
	}
}

/**
 * 产品场景关联列表
 */
class ProductSceneRelateListPanel extends React.Component {

	componentDidMount() {
		this.loadData(this.props.productSceneId);
	}


	loadData = (productSceneId) => {
		this.productSceneId = productSceneId;
		this.productSceneRelateListRef.loadData({ productGlossaryId: productSceneId });
	}

	actionHandler = (actionEvent, panelInstance) => {

		const { productSceneId } = this;

		return {

			refresh: () => {
				panelInstance.loadData({ productGlossaryId: productSceneId });
			},

			addNew: () => {
				panelInstance.addNew();
			},
			doDelete: () => {
				panelInstance.doDelete(isNotNull(actionEvent.params) ? actionEvent.params.id : null);
			},
			doEdit: () => {
				panelInstance.doEdit(actionEvent.params);
			},
			doSave: () => {
				panelInstance.doSave({ productGlossaryId: productSceneId });
			},

		};
	}

	render() {
		return (
			<ProductSceneRelateDataTablePanel ref={inst => this.productSceneRelateListRef = inst} formParams={this.props.formParams} actionHandler={this.actionHandler} onBeforeLoadData={() => { return { productGlossaryId: this.productSceneId } }} />
		);
	}
}

/**
 * 产品对象编辑表单
 */
class ProductObjectEditFormPanel extends React.Component {

	loadData = (productObjectId) => {

		if (isNotNull(productObjectId)) {
			ajax('PRODUCT/REQ/ProductDefine/getProductGlossaryById', { id: productObjectId }, (data) => {
				this.productObject = data;
				this.productVersionId = data.sinceVersionId;
				this.productObjectFormRef.setFormData(data);
			});
		}
	}

	onMount = (form) => {
		this.loadData(this.props.productObjectId);
	}

	actionHandler = (actionEvent, panelInstance) => {
		return {

			doSave: () => {
				panelInstance.doSave({ productVersionId: this.productVersionId }, (result) => {
					showResultMessage(result);
				});
			},

		};
	}

	render() {

		return (
			<ProductObjectFormPanel ref={inst => this.productObjectFormRef = inst} onMount={this.onMount} actionHandler={this.actionHandler} />
		);
	}
}

/**
 * 产品对象属性列表
 */
class ProductObjectAttrListPanel extends React.Component {

	componentDidMount() {
		this.loadData(this.props.productObjectId);
	}


	loadData = (productObjectId) => {
		this.productObjectId = productObjectId;
		this.productObjectAttrListRef.loadData({ productGlossaryId: productObjectId });
	}

	actionHandler = (actionEvent, panelInstance) => {

		const { productObjectId } = this;

		return {

			refresh: () => {
				panelInstance.loadData({ productGlossaryId: productObjectId });
			},

			addNew: () => {
				panelInstance.addNew();
			},

			doDelete: () => {
				panelInstance.doDelete(isNotNull(actionEvent.params) ? actionEvent.params.id : null);
			},

			doEdit: () => {
				panelInstance.doEdit(actionEvent.params);
			},


			doSave: () => {
				panelInstance.doSave({ productGlossaryId: productObjectId });
			},

		};
	}

	render() {
		return (
			<ProductObjectAttrDataTablePanel ref={inst => this.productObjectAttrListRef = inst} actionHandler={this.actionHandler} onBeforeLoadData={() => { return { productGlossaryId: this.productObjectId } }} />
		);
	}
}

/**
 * 产品对象关联列表
 */
class ProductObjectRelateListPanel extends React.Component {

	componentDidMount() {
		this.loadData(this.props.productObjectId);
	}


	loadData = (productObjectId) => {
		this.productObjectId = productObjectId;
		this.productObjectRelateListRef.loadData({ productGlossaryId: productObjectId });
	}

	actionHandler = (actionEvent, panelInstance) => {

		const { productObjectId } = this;

		return {

			refresh: () => {
				panelInstance.loadData({ productGlossaryId: productObjectId });
			},

			addNew: () => {
				panelInstance.addNew();
			},
			doDelete: () => {
				panelInstance.doDelete(isNotNull(actionEvent.params) ? actionEvent.params.id : null);
			},
			doEdit: () => {
				panelInstance.doEdit(actionEvent.params);
			},
			doSave: () => {
				panelInstance.doSave({ productGlossaryId: productObjectId });
			},

		};
	}

	render() {
		return (
			<ProductObjectRelateDataTablePanel ref={inst => this.productObjectRelateListRef = inst} formParams={this.props.formParams} actionHandler={this.actionHandler} onBeforeLoadData={() => { return { productGlossaryId: this.productObjectId } }} />
		);
	}
}


/**
 * 产品术语内容编辑组件
 */
class ProductGlossaryContentPanel extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			editorState: BraftEditor.createEditorState(''),
		}
	}

	loadData = (productGlossaryId) => {

		if (isNotNull(productGlossaryId)) {
			ajax('PRODUCT/REQ/ProductDefine/getProductGlossaryById', { id: productGlossaryId }, (data) => {
				this.productGlossary = data;
				this.setState({ editorState: BraftEditor.createEditorState(data.content) });
			});
		}
	}

	actionHandler = (actionEvent) => {

		return {
			doSave: () => {
				const htmlContent = this.state.editorState.toHTML()
				this.saveEditorContent(htmlContent);
			}
		};
	}

	saveEditorContent = (content) => {
		const { productGlossary } = this;
		ajax('PRODUCT/REQ/ProductDefine/getProductGlossaryById', { id: productGlossary.id }, (data) => {
			if (data) {
				data.content = content;
				data.productVersionId = data.sinceVersionId;
				ajax('PRODUCT/REQ/ProductDefine/saveProductGlossary', data).then((data) => {
					openSuccessNotification('保存完成');
				}).catch(function (message) {
					openErrorNotification(message);
				});
			}
		});

	}

	handleEditorChange = (editorState) => {
		this.setState({ editorState })
	}

	submitContent = async () => {
		const htmlContent = this.state.editorState.toHTML()
		await this.saveEditorContent(htmlContent)
	}

	render() {

		return (
			<UIView actionGroupId="saveActionGroup" bordered={true} actionHandler={this.actionHandler} toolbarPosition="bottom">
				<div className="editor-wrapper">
					<BraftEditor
						value={this.state.editorState}
						onChange={this.handleEditorChange}
						onSave={this.submitContent}
						excludeControls={['media']}
					/>
				</div>
			</UIView>
		);
	}
}

/**
 * 产品思维导图列表
 */
class ProductMindMapListPanel extends React.Component {

	state = {
		selectMindMapIds: [],
		productVersionId: null,
	}

	loadData = (productVersionId) => {
		this.productVersionId = productVersionId;
		this.productMindMapList.loadData({ productVersionId: productVersionId, type: 'PRODUCT_MIND_MAP' });
	}

	actionHandler = (actionEvent) => {
		const { productVersionId, selectMindMapIds } = this;
		const owner = this;
		return {
			refresh: () => {
				this.loadData(productVersionId);
			},
			addNew: () => {
				this.addNewProductMindMap.openModal();
			},
			doDelete: () => {
				const objectIds = {}
				if (actionEvent.params) {
					objectIds.ids = [actionEvent.params.id];
				}
				else {
					objectIds.ids = selectMindMapIds;
				}
				ajax('PRODUCT/REQ/ProductDefine/deleteProductGlossary', objectIds).then((data) => {
					if (data.hasError) {
						openErrorNotification(data.message);
					}
					else {
						owner.loadData(productVersionId);
					}
				});
			},
			doSave: () => {
				this.addNewProductMindMap.getFormData((formData) => {
					formData.type = 'PRODUCT_MIND_MAP';
					formData.productVersionId = productVersionId;
					ajax('PRODUCT/REQ/ProductDefine/saveProductGlossary', formData).then((data) => {
						if (data.hasError) {
							openErrorNotification(data.message);
						}
						else {
							owner.addNewProductMindMap.closeModal();
							owner.loadData(productVersionId);
						}
					});
				});
			}
		};
	}

	showGlossaryContent = (productMindMap) => {
		if (isNull(productMindMap.content)) {
			return null;
		}
		const data = JSON.parse(Base64.decode(productMindMap.content));
		return (<p style={{ margin: 0 }}><GGEditor ><Mind data={data} /><Minimap width={200} height={200} /></GGEditor></p>);
	}

	render() {
		return (
			<React.Fragment>
				<UIDataTableView bordered={false} {...this.props}
					ref={(inst) => this.productMindMapList = inst}
					actionGroupId="ProductUI:productMindMapListActionGroup"
					rowActionGroupId="ProductUI:productMindMapRowActionGroup"
					tableConfigId="ProductUI:productMindMapListTable"
					dataUrl="PRODUCT/REQ/ProductDefine/queryProductGlossary"
					selectMode="multi"
					autoLoad={false}
					actionHandler={this.actionHandler}
					expandedRowRender={this.showGlossaryContent}
					onSelectChange={(selectRowKeys) => {
						this.setState({ selectMindMapIds: selectRowKeys });
					}}
					setToolbarState={(topToolBar, selectMindMapIds) => {
						const { productVersionId } = this.state;
						if (selectMindMapIds.length > 0) {
							topToolBar.enable('delete');
						} else {
							topToolBar.disable('delete');
						}
					}
					}
				/>

				<UIFormView
					title="新增产品思维导图"
					formConfigId="ProductUI:productMindMapAddNewForm"
					actionGroupId="ProductUI:saveActionGroup"
					destroyOnClose={true}
					inPop={true}
					ref={(inst) => this.addNewProductMindMap = inst}
					actionHandler={this.actionHandler}
				/>
			</React.Fragment>
		);
	}
}

/**
 * 产品思维导图编辑页面
 */
class MindMapEditPanel extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			productMindMap: props.location.state,
			showContextMenu: false,
		}
	}

	actionHandler = (actionEvent) => {
		const { productMindMap } = this.state;
		const mindEditor = this.mindEditor;
		const { propsAPI } = mindEditor;
		console.log(propsAPI);
		return {
			doSave: () => {
				const mindMapData = propsAPI.save();
				ajax('PRODUCT/REQ/ProductDefine/getProductGlossaryById', { id: productMindMap.id }, (data) => {
					if (data) {
						data.content = Base64.encode(JSON.stringify(mindMapData));
						data.productVersionId = data.sinceVersionId;
						ajax('PRODUCT/REQ/ProductDefine/saveProductGlossary', data).then((data) => {
							openSuccessNotification('保存完成');
						}).catch(function (message) {
							openErrorNotification(message);
						});
					}
				});
			},
			undo: () => {
				mindEditor.editor.executeCommand('undo');
			},
			redo: () => {
				mindEditor.editor.executeCommand('redo');
			},
			doZoomIn: () => {
				mindEditor.editor.executeCommand('zoomIn');
			},
			doZoomOut: () => {
				mindEditor.editor.executeCommand('zoomOut');
			}
		};
	}

	onContextMenu = (e) => {

		if (this.state.showContextMenu === false) {
			this.setState({ showContextMenu: true });
		}

	}

	onNodeMenuClick = (e) => {
		console.log(e);
		const mindEditor = this.mindEditor;
		mindEditor.editor.executeCommand(e.key);
	}

	isNodeMenuDisabled = () => {

		const mindEditor = this.mindEditor;

		const { propsAPI } = mindEditor;

		const selectNode = propsAPI.getSelected();

		return isNull(selectNode);
	}

	render() {

		const { productMindMap } = this.state;

		let data = {};

		if (isNotNull(productMindMap.content)) {

			data = JSON.parse(Base64.decode(productMindMap.content));

		}
		else {
			data = {
				roots: [{
					label: productMindMap.name,
					children: [],
				}],
			}
		}

		return (
			<UIView
				bordered={false} {...this.props}
				title={<span><UIIcon icon="sitemap" />{'思维导图[' + productMindMap.name + ']'}</span>}
				extra={<Link to="/">返回</Link>}
				actionGroupId="ProductUI:productMindMapEditorActionGroup"
				actionHandler={this.actionHandler}
			>

				<GGEditor ref={inst => this.mindEditor = inst}>
					<Row>
						<Col xs={12}>

							<Mind data={data}
								style={{ width: '100%', height: 600 }}
								onContextMenu={this.onContextMenu}
							/>
							<ContextMenu>
								<NodeMenu>
									{this.state.showContextMenu === true ?
										(<Menu onClick={this.onNodeMenuClick} selectable={false}>
											<Menu.Item key="append" disabled={this.isNodeMenuDisabled()}>插入同级节点</Menu.Item>
											<Menu.Item key="appendChild" disabled={this.isNodeMenuDisabled()}>插入子节点</Menu.Item>
											<Menu.Item key="delete" disabled={this.isNodeMenuDisabled()}>删除</Menu.Item>
										</Menu>) : null
									}
								</NodeMenu>
								<EdgeMenu />
								<GroupMenu />
								<MultiMenu />
								<CanvasMenu />
							</ContextMenu>
						</Col>
					</Row>
				</GGEditor>

			</UIView>

		);
	}
}

const ProductMindMapEditPanel = withPropsAPI(MindMapEditPanel);

/**
 * 产品业务流程图列表
 */
class ProductFlowListPanel extends React.Component {

	state = {
		selectFlowIds: [],
		productVersionId: null,
	}

	loadData = (productVersionId) => {
		this.productVersionId = productVersionId;
		this.productFlowList.loadData({ productVersionId: productVersionId, type: 'PRODUCT_FLOW' });
	}

	actionHandler = (actionEvent) => {
		const { productVersionId, selecFlowIds } = this;
		const owner = this;
		return {
			refresh: () => {
				this.loadData(productVersionId);
			},
			addNew: () => {
				this.addNewProductFlow.openModal();
			},
			doDelete: () => {
				const objectIds = {}
				if (actionEvent.params) {
					objectIds.ids = [actionEvent.params.id];
				}
				else {
					objectIds.ids = selecFlowIds;
				}
				ajax('PRODUCT/REQ/ProductDefine/deleteProductGlossary', objectIds).then((data) => {
					if (data.hasError) {
						openErrorNotification(data.message);
					}
					else {
						owner.loadData(productVersionId);
					}
				});
			},
			doSave: () => {
				this.addNewProductFlow.getFormData((formData) => {
					formData.type = 'PRODUCT_FLOW';
					formData.productVersionId = productVersionId;
					ajax('PRODUCT/REQ/ProductDefine/saveProductGlossary', formData).then((data) => {
						if (data.hasError) {
							openErrorNotification(data.message);
						}
						else {
							owner.addNewProductFlow.closeModal();
							owner.loadData(productVersionId);
						}
					});
				});
			}
		};
	}

	showGlossaryContent = (productFlow) => {
		if (isNull(productFlow.content)) {
			return null;
		}
		const data = JSON.parse(Base64.decode(productFlow.content));
		return (<p style={{ margin: 0 }}><GGEditor ><Flow data={data} /><Minimap width={200} height={200} /></GGEditor></p>);
	}

	render() {
		return (
			<React.Fragment>
				<UIDataTableView bordered={false} {...this.props}
					ref={(inst) => this.productFlowList = inst}
					actionGroupId="ProductUI:productFlowListActionGroup"
					rowActionGroupId="ProductUI:productFlowRowActionGroup"
					tableConfigId="ProductUI:productFlowListTable"
					dataUrl="PRODUCT/REQ/ProductDefine/queryProductGlossary"
					selectMode="multi"
					autoLoad={false}
					actionHandler={this.actionHandler}
					expandedRowRender={this.showGlossaryContent}
					onSelectChange={(selectRowKeys) => {
						this.setState({ selectFlowIds: selectRowKeys });
					}}
					setToolbarState={(topToolBar, selectFlowIds) => {
						const { productVersionId } = this.state;
						if (selectFlowIds.length > 0) {
							topToolBar.enable('delete');
						} else {
							topToolBar.disable('delete');
						}
					}
					}
				/>

				<UIFormView
					title="新增产品业务流程图"
					formConfigId="ProductUI:productFlowAddNewForm"
					actionGroupId="ProductUI:saveActionGroup"
					destroyOnClose={true}
					inPop={true}
					ref={(inst) => this.addNewProductFlow = inst}
					actionHandler={this.actionHandler}
				/>
			</React.Fragment>
		);
	}
}

/**
 * 产品业务流程图编辑页面
 */
class FlowEditPanel extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			productFlow: props.location.state,
			showContextMenu: false,
		}
	}

	actionHandler = (actionEvent) => {
		const { productFlow } = this.state;
		const flowEditor = this.flowEditor;
		const { propsAPI } = flowEditor;
		console.log(propsAPI);
		return {
			doSave: () => {
				const flowData = propsAPI.save();
				ajax('PRODUCT/REQ/ProductDefine/getProductGlossaryById', { id: productFlow.id }, (data) => {
					if (data) {
						data.content = Base64.encode(JSON.stringify(flowData));
						data.productVersionId = data.sinceVersionId;
						ajax('PRODUCT/REQ/ProductDefine/saveProductGlossary', data).then((data) => {
							openSuccessNotification('保存完成');
						}).catch(function (message) {
							openErrorNotification(message);
						});
					}
				});
			},
			undo: () => {
				flowEditor.editor.executeCommand('undo');
			},
			redo: () => {
				flowEditor.editor.executeCommand('redo');
			},
			doZoomIn: () => {
				flowEditor.editor.executeCommand('zoomIn');
			},
			doZoomOut: () => {
				flowEditor.editor.executeCommand('zoomOut');
			}
		};
	}

	onContextMenu = (e) => {

		if (this.state.showContextMenu === false) {
			this.setState({ showContextMenu: true });
		}

	}

	onNodeMenuClick = (e) => {

		const flowEditor = this.flowEditor;
		flowEditor.editor.executeCommand(e.key);
	}

	isNodeMenuDisabled = () => {

		const flowEditor = this.flowEditor;

		const { propsAPI } = flowEditor;

		const selectNode = propsAPI.getSelected();

		return isNull(selectNode);
	}

	render() {

		const { productFlow } = this.state;

		let data = {};

		if (isNotNull(productFlow.content)) {

			data = JSON.parse(Base64.decode(productFlow.content));

		}
		else {
			data = {
				nodes: [{
					type: 'node',
					size: '70*70',
					shape: 'flow-circle',
					color: '#FA8C16',
					label: '起止节点',
					x: 55,
					y: 55,
					id: 'ea1184e8',
					index: 0,
				}, {
					type: 'node',
					size: '70*70',
					shape: 'flow-circle',
					color: '#FA8C16',
					label: '结束节点',
					x: 55,
					y: 255,
					id: '481fbb1a',
					index: 2,
				}],
				edges: [{
					source: 'ea1184e8',
					sourceAnchor: 2,
					target: '481fbb1a',
					targetAnchor: 0,
					id: '7989ac70',
					index: 1,
				}],
			}
		}

		return (
			<UIView
				bordered={false} {...this.props}
				title={<span><UIIcon icon="sitemap" />{'业务流程图[' + productFlow.name + ']'}</span>}
				extra={<Link to="/">返回</Link>}
				actionGroupId="ProductUI:productFlowEditorActionGroup"
				actionHandler={this.actionHandler}
			>
				<GGEditor ref={inst => this.flowEditor = inst}>
					<Layout>
						<Sider theme="light">
							<ItemPanel>
								<Item
									type="node"
									size="72*72"
									shape="flow-circle"
									src="images\flow\start.svg"
								/>
								<Item
									type="node"
									size="80*48"
									shape="flow-rect"
									src="images\flow\node.svg"
								/>
								<Item
									type="node"
									size="80*72"
									shape="flow-rhombus"
									src="images\flow\switch.svg"
								/>
								<Item
									type="node"
									size="80*48"
									shape="flow-capsule"
									src="images\flow\data.svg"
								/>
							</ItemPanel>
						</Sider>
						<Content>
							<Flow data={data}
								style={{ width: '100%', height: 600 }}
								onContextMenu={this.onContextMenu}
							/>
							<ContextMenu>
								<NodeMenu>
									{this.state.showContextMenu === true ?
										(<Menu onClick={this.onNodeMenuClick} selectable={false}>
											<Menu.Item key="append" disabled={this.isNodeMenuDisabled()}>插入同级节点</Menu.Item>
											<Menu.Item key="appendChild" disabled={this.isNodeMenuDisabled()}>插入子节点</Menu.Item>
											<Menu.Item key="delete" disabled={this.isNodeMenuDisabled()}>删除</Menu.Item>
										</Menu>) : null
									}
								</NodeMenu>
								<EdgeMenu />
								<GroupMenu />
								<MultiMenu />
								<CanvasMenu />
							</ContextMenu>
						</Content>
						<Sider theme="light">right sidebar</Sider>
					</Layout>
				</GGEditor>
			</UIView>

		);
	}
}

const ProductFlowEditPanel = withPropsAPI(FlowEditPanel);

